<template>
	<div class="Info-show">
		<div class="Info-show-warpper">
			<div class="info-header clear">
				<div class="search pull-left">
					<span>action名称</span>
					<Input 
						v-model="searchValue['handlerName']" 
						placeholder="action名称" 
						@on-enter="searchClick" 
						style="width: 150px;padding-left: 5px;"></Input>
					&nbsp;&nbsp;
					<span>时间</span>
					<DatePicker 
						v-model="searchValue['start_time']" 
						type="datetime" 
						placeholder="开始请求时间" 
						style="width: 180px;padding-left: 5px;"
						@on-open-change="timeopen('start_time')"
						@on-change="timeChange"></DatePicker>
					-
					<DatePicker 
						v-model="searchValue['end_time']" 
						type="datetime" 
						placeholder="结束请求时间" 
						style="width: 180px;"
						@on-open-change="timeopen('end_time')"
						@on-change="timeChange"></DatePicker>
				</div>
				<div class="searchBtn pull-left" @click="searchClick">
					<Button type="ghost" shape="circle" icon="ios-search"></Button>
				</div>
			</div>
			<div class="info-table">
				<info-table 
					:thead="thead" 
					:tbody="tbody"
					:total="total"></info-table>
			</div>
		</div>
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoTableMixin } from 'common/js/mixins';
	import { ServiceLogThead } from 'common/js/table';
	import { errorNotice } from 'common/js/dom';
	import { getList } from 'api/ServiceLog';
	
	export default {
		mixins: [loadingMixin, infoTableMixin],
		created() {
			this.searchObj = null;
			
			this._getList()
		},
		data() {
			return {
				searchValue: {
					handlerName: '',
					start_time: '',
					end_time: ''
				},
				thead: ServiceLogThead(this),
				tbody: [],
				total: 0,
				showLoading: false
			}
		},
		methods: {
			searchClick() {
				this._getList()
			},
			search() {
				this.searchObj = {};
				
				this.searchObj['searchProperty'] = {
					handlerName: ''
				};
				
				if (this.searchValue.handlerName) {
					this.searchObj['searchProperty']['handlerName'] = this.searchValue.handlerName;
				}
				
				this.searchObj['searchProperty'] = JSON.stringify(this.searchObj['searchProperty']);
				
				if (this.searchValue.start_time && this.searchValue.end_time) {
					this.searchObj['startEndTime'] = `${this.searchValue.start_time}/${this.searchValue.end_time}`;
					this.searchObj['searchTimeProperty'] = 'logTime';
					return;
				}
				
				if (this.searchValue.start_time) {
					this.searchObj['startEndTime'] = `${this.searchValue.start_time}/`;
					this.searchObj['searchTimeProperty'] = 'logTime';
				}
				
				if (this.searchValue.end_time) {
					this.searchObj['startEndTime'] = `/${this.searchValue.end_time}`;
					this.searchObj['searchTimeProperty'] = 'logTime';
				}
			},
			timeopen(key) {
				this.timeKey = key;
			},
			timeChange(time) {
				this.searchValue[this.timeKey] = time;
			},
			_getList(page) {
				this.showLoading = true;
				this.search();
				getList(this.searchObj, page)
					.then(res => {
						this.tbody = res.rows;
						this.total = res.total;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			}
		}
	}
</script>

<style>
	
</style>